<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--让手机版生效-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shine课程表-课表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.15.0/popper.min.js" type="module"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <link rel="stylesheet" href="../static/styles/schedule.css" th:href="@{/styles/schedule.css}"/>
</head>
<body th:background="${background_url}">
    <div class="root">
        <!--只能在这里写了，js中又出现被转义的情况，上次通过th:inline:javascript解决了，现在又不行了...-->
    <!--    <div id="bg" th:style="'background:url(' + ${background_url} + '),no-repeat;'"></div>-->
        <!--这块include不能加/，因为挂在服务器上没办法识别-->
        <div class="top_bar" th:include="top"></div>
        <div class="main container-fluid" style="margin-top: 50px">
            <!--顶部功能区域-->
            <div class="row">
                <div class="col-sm-12">
                    <!--自己实现的功能条好像更好用一点...-->
                    <div class="function-bar">
                        <a href="#">
                            <img class="function-img" th:src="@{/images/settings.png}" style="right: 25px" onclick="scheduleSetting()">
                        </a>
                        <a href="import_lesson">
                            <img class="function-img" th:src="@{/images/import.png}" style="right: 80px">
                        </a>
                        <a href="#">
                            <img class="function-img" th:src="@{/images/plus.png}" style="right: 135px" onclick="addLesson()">
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <!--左留空，让课表居中-->
                <div class="col-sm-3" id="left-empty">

                </div>
                <div class="col-sm-6 lesson-div-out">
                    <!--                <div class="lesson_div_inner" th:insert="/lesson"></div>-->
                    <iframe class="lesson-frame" src="/lesson"></iframe>
                </div>
                <!--右留空，可以做功能区域，比如添加课程的添加课程区域，课表设置的设置区域等等-->
                <div class="col-sm-3" id="right-empty">
                    <!--设置界面-->
                    <div id="setting" hidden="hidden">
                        <div>
                            <h5 class="title">设置</h5>
                            <hr>
                        </div>
                        <iframe class="setting-frame" src="/schedule_setting"></iframe>
                    </div>
                    <!--添加课程界面-->
                    <div id="add" hidden="hidden">
                        <div>
                            <h5 class="title">添加课程</h5>
                            <hr>
                        </div>
                        <iframe class="add-frame" src="/add_lesson"></iframe>
                    </div>
                </div>
            </div>

            <div class="row foot">
                <div class="col-sm-12">
                    <!--页脚-->
                    <div th:include="footer"></div>
                </div>
            </div>
        </div>
    </div>
</body>

<!--如果想要thymeleaf完全支持js，需要加上th:inline="javascript"-->
<script type="text/javascript" th:inline="javascript">
    window.onload = function () {
        // //设置背景图片为每日一图
        // //js中又出现被转义的情况，上次通过th:inline:javascript解决了，现在又不行了...
        // const backgroundUrl = [[${background_url}]];
        // $("#bg").css("background", "no-repeat;");

        //不必判断未登录状态，后端已经重定向未登录到登录界面
        if ([[${schedule_id}]] == -1 && [[${login}]]) {
            alertLoadLesson();
        }

        //设置lesson.html界面中的日期栏中“今日”指示器
        // setTodayDiv();
        // //填充课程信息
        // setLesson(lessonList);
    };

    //提示用户导入课程
    function alertLoadLesson() {
        Swal.fire({
            title: "导入课程",
            text: "您已经登录了Sunshine课程表，但是还没有导入课程，是否要导入？",
            icon: "warning",
            confirmButtonText:'确定',
            showCancelButton: true,
            cancelButtonText:'取消',
            reverseButtons: true,
            dangerMode: false,
        }).then((input) => {
                if (input.value) {
                    location.href = "/import_lesson"
                } else {
                    //不导入则返回主页
                    location.href = "/index"
                }
            });
    }

    function addLesson() {
        $(function () {
            showRightDiv(1);
        })
    }

    function scheduleSetting() {
        $(function () {
            showRightDiv(2);
        })
    }

    //展示出右边功能区域
    function showRightDiv(showType) {
        $(function () {
            const leftEmpty = $("#left-empty");
            const rightEmpty = $("#right-empty");

            const add = document.getElementById("add");
            const setting = document.getElementById("setting");

            //添加课程
            if (1 == showType){
                //如果设置窗口正在打开，则关闭
                if (!setting.hidden) {
                    setting.hidden = true;
                    leftEmpty.addClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-6").addClass("col-sm-3");
                }
                //隐藏/显示窗口操作
                if (add.hidden){
                    //更改类名来通过bootstrap修改宽度
                    leftEmpty.removeClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-3").addClass("col-sm-6");
                    // //对移动端的优化，选择登录后直接跳转到登录窗口的位置
                    // location.href = "#setting";
                } else {
                    leftEmpty.addClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-6").addClass("col-sm-3");
                }

                add.hidden = !add.hidden
            }
            //设置
            else if (2 == showType){
                if (!add.hidden) {
                    add.hidden = true;
                    leftEmpty.addClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-6").addClass("col-sm-3");
                }
                //隐藏/显示窗口操作
                if (setting.hidden){
                    //更改类名来通过bootstrap修改宽度
                    leftEmpty.removeClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-3").addClass("col-sm-6");
                    // //对移动端的优化，选择登录后直接跳转到登录窗口的位置
                    // location.href = "#setting";
                } else {
                    leftEmpty.addClass("col-sm-3");
                    rightEmpty.removeClass("col-sm-6").addClass("col-sm-3");
                }

                setting.hidden = !setting.hidden
            }

        })
    }
</script>
</html>